<template>
  <v-row v-if="pvcs.length !== 0" no-gutters>
    <v-col>
      <v-card class="ma-2" outlined>
        <v-card-title class="mb-1"> PersistentVolumeClaims </v-card-title>
        <v-card-actions>
          <v-chip
            v-for="(p, i) in pvcs"
            :key="i"
            class="ma-2"
            color="primary"
            outlined
            large
            label
            @click.stop="onClick(p)"
          >
            <img
              src="/pvc.svg"
              height="40"
              alt="p.metadata.name"
              class="mr-2"
            />
            {{ p.metadata.name }}
          </v-chip>
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script lang="ts">
import { V1PersistentVolumeClaim } from "@kubernetes/client-node";
import { computed, inject, defineComponent } from "@nuxtjs/composition-api";
import {} from "../../lib/util";
import PersistentVolumeClaimStoreKey from "../../StoreKey/PVCStoreKey";
export default defineComponent({
  setup() {
    const store = inject(PersistentVolumeClaimStoreKey);
    if (!store) {
      throw new Error(`${PersistentVolumeClaimStoreKey.description} is not provided`);
    }

    const onClick = (pvc: V1PersistentVolumeClaim) => {
      store.select(pvc, false);
    };

    const pvcs = computed(() => store.pvcs);
    return {
      pvcs,
      onClick,
    };
  },
});
</script>
